<template>
    <div>
        <!--pc端 -->
        <div class="box show-pc">
            <div class="nb-head-layout PageWidth">
                <div>
                    <HeadLogo></HeadLogo>
                </div>
                <div style="flex: 1;margin-left: 30px;">
                    <CategoryMenu :activeKey="activeKey" @menuClick="handleMenuClick"></CategoryMenu>
                </div>
                <div class="Search-item">
                    <HeadSearch></HeadSearch>
                </div>
                <!-- 推荐关注 -->
                <!-- <div>
                    <HeadRightMenu :current="activeKey" @itemClick="handleMenuClick"></HeadRightMenu>
                </div> -->
                <div>
                    <HeadTheme></HeadTheme>
                </div>
                <div>
                    <HeadUserInfo></HeadUserInfo>
                </div>
            </div>
        </div>

        <!--手机端 -->
        <div class="show-wap">
            <div class="wap-head">
                <div>
                    <HeadLogo></HeadLogo>
                </div>
                <div>
                    <CategoryMenu :activeKey="activeKey" @menuClick="handleMenuClick"></CategoryMenu>
                </div>
                <div>
                    <HeadTheme></HeadTheme>
                </div>

            </div>
            <div>

                <foot></foot>
            </div>

        </div>


    </div>
</template>

<script setup name="PCHeadLayout">
import HeadLogo from './HeadLogo.vue';
import CategoryMenu from './CategoryMenu.vue';
import HeadSearch from './HeadSearch.vue';
import HeadRightMenu from './HeadRightMenu.vue';
import HeadTheme from './HeadTheme.vue';
import HeadUserInfo from './HeadUserInfo.vue';
import foot from './wap/foot.vue';
import { ref } from 'vue';


const activeKey = ref('');
const handleMenuClick = (key) => {
    activeKey.value = key;
};





</script>

<style lang="less" scoped>



.box {
    width: 100%;
    height: 4.3vw;
    display:flex;
    align-items: center;
    background-color: var(--color-bg);
    border-bottom: 1px solid #f0f0f0;

}

.nb-head-layout {
    height: 4.3vw;
    margin: 0 auto;
    z-index: 100;
    display: flex;
    align-items: center;

    .Search-item {
        width: 40vw;
        margin-right: 2.39vw;
     
    }
}



// 手机端样式
.wap-head {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--color-bg);
    z-index: 100;

}
</style>